<template>
  <div class="ac-b">
    <h2>选中变色</h2>
    <ul>
      <li
        v-for="(item, index) in items"
        :class="activeIndex == index ? 'active' : ''"
        :key="index"
        @click="change(index)"
      >
        {{ item }}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeIndex: 0,
      items: ["你好", "我好", "大家好"],
    };
  },
  methods: {
    change(a) {
      this.activeIndex = a;
    },
  },
};
</script>
<style scoped>

ul {
  width: 400px;
  list-style: none;

  text-align: center;
  overflow: hidden;
  /* 取消ul前面的空白 */
  padding: 0;
  display: flex;
  justify-content: space-around;
}
li {
  width: 150px;
  cursor: pointer;
}

.active {
  background-color: aquamarine;
  color: aliceblue;
}

</style>